<template>
    <a-modal v-model:visible="visible" destroyOnClose title="上传文件" @ok="upload">
        <a-upload-dragger v-model:fileList="fileList" name="file" :beforeUpload="() => false" :multiple="true">
            <p class="ant-upload-drag-icon">
                <inbox-outlined />
            </p>
            <p class="ant-upload-text">点击 或 拖拽上传</p>
        </a-upload-dragger>
    </a-modal>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue';
import { InboxOutlined } from "@ant-design/icons-vue";
const fileList = ref([]);
const emit = defineEmits(['update:show', 'refresh'])
const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    Path: {
        type: Array,
        default: () => []
    }
});

const visible = ref<boolean>(props.show);

watch(() => props.show, (val) => {
    visible.value = val
})

watch(visible, (val) => {
    emit('update:show', val)
})

function runderFile(file: File) {
    return new Promise((resolve, reject) => {
        var reader = new FileReader();
        reader.readAsText(file);
        reader.onload = function () {
            resolve({
                name: file.name,
                content: this.result
            });
        }
    })
}

const upload = async () => {
    var CodeArray = [];
    for (let i = 0; i < fileList.value.length; i++) {
        var file: any = await runderFile((fileList.value[i] as any).originFileObj);
        CodeArray.push(file.name + '<<$$^^|^^$$>>' + file.content);
    }
    var CodeContent = CodeArray.join('<<$$$@#*^^^|||PageSegmentation|||^^^*#@$$$>>');
    emit('refresh', CodeContent)
}


</script>
<style lang="less" scoped>

</style>